<template>
  <div>
    <s-title text="基本信息"></s-title>
    <div class="head-title">
      <div
        class="head-title-box"
        v-for="(item, index) in headTitle"
        :key="index"
      >
        <span class="head-title-name">{{ item.name }}</span>
        <span class="head-title-value">{{ item.value }}</span>
      </div>
    </div>
    <div class="prople">
      <div class="people-title">{{ people.title }}</div>
      <div class="people-content">
        <div
          class="people-content-box"
          v-for="(item, index) in people.content"
          :key="index"
        >
          <span class="people-name">{{ item.value }}</span>
          <span class="people-value">{{ item.name }}</span>
        </div>
      </div>
    </div>
    <div
      class="classification"
      v-for="(item, index) in classification"
      :key="index"
    >
      <div class="classification-title">{{ item.title }}</div>
      <div class="classification-content">
        <div
          class="classification-content-box"
          v-for="(items, indexs) in item.content"
          :key="indexs"
          :style="items.active ? ' color:yellow' : ''"
          @click="classificationhandle(items)"
        >
          <el-tooltip
            :disabled="index === 3 && indexs === 2 ? false : true"
            content="点击视频撒点/再次点击清除点"
            placement="top-start"
            effect="dark"
          >
            <div>
              <span class="classification-content-name">{{ items.value }}</span>
              <span class="classification-content-value">{{ items.name }}</span>
            </div>
          </el-tooltip>
        </div>
      </div>
    </div>
    <div class="situationalSigns-margin"></div>
  </div>
</template>

<script>
import sTitle from "../../common/sTitle.vue";
import { peopleCount, videoList, companyCount } from "../../../utils/api";
import map from "../../../assets/map";
export default {
  name: "situationalSigns",
  components: {
    sTitle,
  },
  data() {
    return {
      headTitle: [
        { name: "区域面积", value: "1.197km²" },
        { name: "街道满意度", value: 90 },
      ],
      people: {
        title: "人口",
        content: [
          { name: "实有人口", value: 21192 },
          // { name: "实有人口", value: 0 },
          { name: "人户一致", value: 24564 },
          { name: "人户分离", value: 2967 },
          { name: "来沪人口", value: 7996 },
          { name: "境外人口", value: 2625 },
          { name: "老年人口", value: 302798 },
          { name: "学前儿童", value: 45974 },
          { name: "低保", value: 4127 },
          { name: "残疾人", value: 1478 },
          { name: "特殊人口", value: 123 },
        ],
      },
      classification: [
        {
          title: "企业",
          content: [
            { name: "注册企业", value: "6577" },
            { name: "经营企业", value: "1970" },
            { name: "纳税企业", value: "2970" },
          ],
        },
        {
          title: "房屋",
          content: [
            { name: "小区", value: "42" },
            { name: "实有房屋", value: "1706" },
            // { name: "居住房", value: "--" },
            { name: "历保建筑", value: "3" },
          ],
        },
        {
          title: "机构",
          content: [
            { name: "教育机构", value: "13" },
            { name: "卫生机构", value: "19" },
            { name: "养老机构", value: "26" },
          ],
        },
        {
          title: "部件",
          content: [
            { name: "城市部件", value: "31869" },
            { name: "物联网", value: "4653" },
            { name: "视频监控", value: "219",active:false },
          ],
        },
      ],
      videoclickflag: false,
    };
  },
  created() {},
  mounted() {
    const that = this;
    let paramPeople = {
      streetName: "豫园",
    };
    peopleCount(JSON.stringify(paramPeople)).then((res) => {
      if (res.data.code === 200) {
        that.people.content[0].value = res.data.data.poPuCount;
        that.people.content[1].value = res.data.data.peopleHouseSameCount;
        that.people.content[2].value = res.data.data.peopleHouseNoSameCount;
        that.people.content[3].value = res.data.data.comeShangHaiCount;
        that.people.content[4].value = res.data.data.peopleJingWaiCount;
        that.people.content[5].value = res.data.data.peopleOldCount;
        that.people.content[6].value = res.data.data.loadPeopleYoungCount;
        that.people.content[8].value = res.data.data.canJiCount;
        that.people.content[7].value = res.data.data.diBaoCount;
        that.people.content[9].value = res.data.data.peopleSpecialCount;
      }
    });
    companyCount(JSON.stringify({streetName:'豫园街道'})).then((res) => {
      if(res.data.code === 200){
        this.classification[0].content[0].value = res.data.data[0].regCount;
        this.classification[0].content[1].value = res.data.data[0].workCount;
        this.classification[0].content[2].value = res.data.data[0].taxCount;
      }
    });
  },
  methods: {
    classificationhandle(item) {
      if (item.name === "视频监控") {
        videoList(
          JSON.stringify({
            streetname: "豫园",
          })
        ).then((res) => {
          if (res.data.code === 200) {
            map.reductView(tedp.webGis);
            if (!item.active) {
               map.pointPolymeriza(
                tedp.webGis,
                "video",
                res.data.data,
                "video_lng",
                "video_lat"
              );
              item.active = true;
            } else {
              map.clearpointPolymeriza("video");
              item.active = false;
            }
          }
        });
      }
    },
  },
};
</script>

<style scoped>
.head-title {
  width: 523px;
  height: 40px;
  display: flex;
  justify-content: space-between;
  margin-left: 25px;
}
.head-title-box {
  width: 230px;
  height: 25px;
  font-size: 18px;
  font-family: "Microsoft YaHei";
  font-weight: 400;
  color: #cccccc;
  line-height: 12px;
  display: flex;
  background: url(~@/assets/image/left2/governanceEvents-t.png);
  background-size: 100% 100%;
  background-repeat: no-repeat;
  background-position: center;
}
.head-title-name {
  color: #cccccc;
  text-indent: 45px;
  text-align: center;
}
.head-title-value {
  color: #fedc85;
  text-align: center;
  margin-left: 10px;
}
.prople {
  width: 634px;
  height: 112px;
  display: flex;
  color: #fff;
}
.people-title {
  width: 69px;
  height: 30px;
  margin: auto 0;
  background-size: 100% 100%;
  background-repeat: no-repeat;
  text-align: center;
  line-height: 30px;
  font-size: 18px;
  font-family: "Microsoft YaHei";
  font-weight: 400;
  color: #ffffff;
  background: url(~@/assets/image/left2/people-title.png);
  background-size: 100% 100%;
  background-repeat: no-repeat;
  background-position: center;
  position: relative;
}
.people-title::after {
  content: "";
  width: 40px;
  height: 60px;
  background: url(/static/img/people-titleafter.da69e40.png);
  background-size: 100% 100%;
  background-repeat: no-repeat;
  background-position: center;
  position: absolute;
  top: -14px;
}
.people-content {
  width: 523px;
  height: 112px;
  display: flex;
  flex-wrap: wrap;
}
.people-content-box {
  width: 74px;
  height: 52px;
  background-size: 100% 100%;
  background-repeat: no-repeat;
  margin: 0px 15px;
  background: url(~@/assets/image/left2/content-box.png);
  background-size: 100% 100%;
  background-repeat: no-repeat;
  background-position: center;
}
.people-name {
  display: inline-block;
  width: 100%;
  height: 26px;
  text-align: center;
  line-height: 26px;
  color: #fedc85;
  font-size: 16px;
  font-weight: bold;
}
.people-value {
  display: inline-block;
  width: 100%;
  height: 22px;
  font-size: 13px;
  text-align: center;
  line-height: 22px;
}
.classification {
  width: 634px;
  height: 56px;
  display: flex;
  color: #fff;
}
.classification-title {
  width: 69px;
  height: 30px;
  margin: auto 0;
  background-size: 100% 100%;
  background-repeat: no-repeat;
  text-align: center;
  line-height: 30px;
  font-size: 18px;
  font-family: "Microsoft YaHei";
  font-weight: 400;
  color: #ffffff;
  background: url(~@/assets/image/left2/people-title.png);
  background-size: 100% 100%;
  background-repeat: no-repeat;
  background-position: center;
  position: relative;
}
.classification-title::after {
  content: "";
  width: 40px;
  height: 60px;
  background: url(~@/assets/image/left2/people-titleafter.png);
  background-size: 100% 100%;
  background-repeat: no-repeat;
  background-position: center;
  position: absolute;
  top: -14px;
}
.classification-content {
  width: 523px;
  height: 56px;
  display: flex;
}
.classification-content-box {
  width: 74px;
  height: 52px;
  background-size: 100% 100%;
  background-repeat: no-repeat;
  margin: 0px 15px;
  background: url(~@/assets/image/left2/content-box.png);
  background-size: 100% 100%;
  background-repeat: no-repeat;
  background-position: center;
}
.classification-content-name {
  display: inline-block;
  width: 100%;
  height: 26px;
  text-align: center;
  line-height: 26px;
  color: #fedc85;
  font-size: 16px;
  font-weight: bold;
}
.classification-content-value {
  display: inline-block;
  width: 100%;
  height: 26px;
  text-align: center;
  line-height: 26px;
  font-size: 13px;
}
.situationalSigns-margin {
  width: 100%;
  height: 10px;
}
</style>
